<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto py-6 px-4">
      <!-- 顶部操作区 -->
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <div class="flex space-x-4">
            <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="handleAdd">
              <i class="el-icon-plus mr-1"></i>新增文案
            </el-button>
            <el-button class="!rounded-button whitespace-nowrap" @click="handleBatchImport">
              <i class="el-icon-upload mr-1"></i>批量导入
            </el-button>
            <el-button type="text" class="!rounded-button whitespace-nowrap" @click="handleDownloadTemplate">
              <i class="el-icon-download mr-1"></i>下载模板
            </el-button>
          </div>
          <div class="w-64">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索文案"
              class="w-full"
              prefix-icon="el-icon-search"
            />
          </div>
        </div>
        <!-- 修改标签选择区域 -->
        <div class="flex flex-wrap gap-2">
          <span class="text-gray-600 mr-4">内容分类：</span>
          <el-checkbox-group v-model="selectedTags" size="mini">
            <el-checkbox
              v-for="tag in tags"
              :key="tag"
              :label="tag"
              border
              class="!rounded-button"
            >
              {{ tag }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="title" label="文案标题" width="200" />
        <el-table-column prop="content" label="文案内容" min-width="300" show-overflow-tooltip />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="350" fixed="right">
          <template slot-scope="scope">
            <div class="flex space-x-2">
              <el-tooltip content="文案改写" placement="top">
                <el-button class="!rounded-button whitespace-nowrap" @click="handleRewrite(scope.row)">
                  <i class="el-icon-magic-stick"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip content="合成音频" placement="top">
                <el-button class="!rounded-button whitespace-nowrap" @click="handleAudio(scope.row)">
                  <i class="el-icon-microphone"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip content="AI视频合成" placement="top">
                <el-button class="!rounded-button whitespace-nowrap" @click="handleVideo(scope.row)">
                  <i class="el-icon-video-camera"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top">
                <el-button class="!rounded-button whitespace-nowrap" @click="handleEdit(scope.row)">
                  <i class="el-icon-edit"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button class="!rounded-button whitespace-nowrap" @click="handleDelete(scope.row)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="flex justify-end mt-4">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 新增/编辑弹窗 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :title="dialogType === 'add' ? '新增文案' : '编辑文案'"
        width="600px"
      >
        <el-form :model="formData" label-width="80px">
          <el-form-item label="文案标题">
            <el-input v-model="formData.title" placeholder="请输入文案标题" />
          </el-form-item>
          <el-form-item label="文案内容">
            <el-input
              v-model="formData.content"
              type="textarea"
              :rows="4"
              placeholder="请输入文案内容"
            />
          </el-form-item>
        </el-form>
        <template slot="footer">
          <span class="dialog-footer">
            <el-button class="!rounded-button whitespace-nowrap" @click="dialogVisible = false">取消</el-button>
            <el-button class="!rounded-button whitespace-nowrap" type="primary" @click="handleSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 批量导入弹窗 -->
      <el-dialog :visible.sync="importDialogVisible" title="批量导入" width="500px">
        <el-upload
          class="upload-demo"
          drag
          action="/api/upload"
          :auto-upload="false"
          :on-change="handleFileChange"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template slot="tip">
            <div class="el-upload__tip">
              只能上传 xlsx/xls 文件
            </div>
          </template>
        </el-upload>
        <template slot="footer">
          <span class="dialog-footer">
            <el-button class="!rounded-button whitespace-nowrap" @click="importDialogVisible = false">取消</el-button>
            <el-button class="!rounded-button whitespace-nowrap" type="primary" @click="handleImportSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      selectedTag: '',
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      dialogVisible: false,
      importDialogVisible: false,
      dialogType: 'add',
      formData: {
        title: '',
        content: '',
      },
      tableData: [
        {
          id: 1,
          title: '抖音爆款文案',
          content: '快来体验这款超级好用的智能文案助手，让你的创作效率提升10倍！',
          createTime: '2024-01-15 14:30:00',
        },
        {
          id: 2,
          title: '产品介绍文案',
          content: '独特的AI算法，精准把握用户痛点，让每一个文案都能直击人心！',
          createTime: '2024-01-15 15:20:00',
        },
        {
          id: 3,
          title: '营销推广文案',
          content: '想要提升转化率？试试我们的AI文案助手，让数据增长不再是难题！',
          createTime: '2024-01-15 16:10:00',
        },
      ],
      selectedTags: [],  // 修改此处
      // 其他数据保持不变
      tags: ['营销文案', '产品介绍', '活动策划', '品牌故事', '社交媒体'],
    };
  },
  methods: {
    handleTagSelect(tag) {
      this.selectedTag = tag;
      // 这里可以根据标签筛选内容
    },
    handleAdd() {
      this.dialogType = 'add';
      this.formData = {
        title: '',
        content: '',
      };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogType = 'edit';
      this.formData = { ...row };
      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('确认删除该文案吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message.success('删除成功');
      });
    },
    handleRewrite(row) {
      this.$message.success('正在生成改写方案...');
    },
    handleAudio(row) {
      this.$message.success('正在合成音频...');
    },
    handleVideo(row) {
      this.$message.success('正在跳转到视频合成页面...');
    },
    handleBatchImport() {
      this.importDialogVisible = true;
    },
    handleDownloadTemplate() {
      this.$message.success('模板下载中...');
    },
    handleFileChange(file) {
      console.log(file);
    },
    handleImportSubmit() {
      this.$message.success('导入成功');
      this.importDialogVisible = false;
    },
    handleSubmit() {
      this.$message.success(this.dialogType === 'add' ? '添加成功' : '修改成功');
      this.dialogVisible = false;
    },
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
  },
};
</script>

<style scoped>
.el-table {
  --el-table-border-color: #ebeef5;
  --el-table-header-background-color: #f5f7fa;
}
.el-dialog >>> .el-upload-dragger {
  width: 100%;
}
.el-dialog >>> .el-upload {
  width: 100%;
}
.el-checkbox.el-checkbox--bordered {
  margin-right: 8px;
  margin-bottom: 8px;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.el-checkbox__label) {
  font-size: 14px;
}
</style>